<template>
  <div>
    <div class="aside">
        <!-- default-active 默认选中的菜单
            router="true" 表示开启路由模式，即可跳转页面, index 代表的即为路由地址-->
      <el-menu
        :router="true"
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <!-- @open="handleOpen"
        @close="handleClose" -->
        <el-menu-item index="/homep/">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/audit/">
          <i class="el-icon-document"></i>
          <span slot="title">审核视频列表</span>
        </el-menu-item>
        <el-menu-item index="/classify/">
          <i class="el-icon-menu"></i>
          <span slot="title">分类管理</span>
        </el-menu-item>
        <el-submenu index="/staff/home0/">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span slot="title">人员管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/staff/home0/">普通会员</el-menu-item>
            <el-menu-item index="/staff/manager/">管理人员</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="/complain/">
          <i class="el-icon-phone"></i>
          <span slot="title">投诉视频管理</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
    methods: {
      // handleOpen(key, keyPath) {
      //   console.log(key, keyPath);
      // },
      // handleClose(key, keyPath) {
      //   console.log(key, keyPath);
      // }
    }
};
</script>

<style scoped>
.aside{
    position: absolute;
    width: 20%;
    top: 60px;
    left: 0px;
    bottom: 0px;
    overflow-y: auto; 
    background-color: #545c64;
}
.el-menu{
    border-right: none;
}
</style>